<template>
	<view>
		<Tabs :tabs="tabs" @tabsItemChange="tabsItemChange"></Tabs>
		<view class="fb_main">
			<view class="fb_content">
				<textarea :value="textVal" @input="handleTextInput" placeholder="请描述一下您的问题"></textarea>
				<view class="fb_tool">
					<button @click="handleChooseImg">+</button>
					<view class="up_img_item" v-for="(item,index) in chooseImgs" :key="index" @click="handleRemoveImg"
						:data-index="index">
						<UpImg :src="item"></UpImg>
					</view>
				</view>
			</view>
			<view class="form_btn_wrap">
				<button @click="handleFormSubmit" type="warn">
					<icon type="success_no_circle" size="23" color="white"></icon>
					提交
				</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabs: [{
						id: 0,
						value: "体验问题",
						isActive: true
					},
					{
						id: 1,
						value: "商品、商家投诉",
						isActive: false
					}
				],
				// 被选中的图片路径 数组
				chooseImgs: [],
				// 文本域的内容
				textVal: "",
				UpLoadImgs: []
			};
		},
		methods: {
			tabsItemChange(index) {
				this.tabs.forEach((v, i) => i === index ? v.isActive = true : v.isActive = false)

			},
			handleChooseImg() {
				uni.chooseImage({
					count: 9,
					sizeType: ['original', 'compressed'],
					sourceType: ['album', 'camera'],
					success: (res) => {
						this.chooseImgs = [...this.chooseImgs,...res.tempFilePaths]
					}
				})
			},
			handleRemoveImg(e) {
				const {
					index
				} = e.currentTarget.dataset
				this.chooseImgs.splice(index, 1)
			},
			handleTextInput(e) {
				this.textVal = e.detail.value
			},
			handleFormSubmit(e) {
				if (this.textVal.trim()) {
					uni.showToast({
						title: '输入不合法',
						icon: 'none',
						mask: true
					})
					return;
				}
				uni.showLoading({
					title: '正在上传中',
					mask: true
				})
				if (this.chooseImgs != 0) {
					this.chooseImgs.forEach((v, i) => {
						uni.uploadFile({
							url: 'https://images.ac.cn/Home/Index/UploadAction/',
							filePath: v,
							name: 'file',
							formData: {},
							success: (res) => {
								console.log(res)
								let url = JSON.parse(res.data).url;
								this.UpLoadImgs.push(url)
								if (i === this.chooseImgs.length - 1) {
									uni.hideLoading()
									console.log("把文本的内容和外网的图片数组 提交到后台中")
									this.textVal = '';
									this.chooseImgs = [];
									uni.navigateBack({
										delta: 1
									})
								}
							}
						})
					})
				} else {
					uni.hideLoading();
					console.log('只提交了文本')
					uni.navigateBack({
						delta: 1
					})
				}
			}

		}
	}
</script>

<style lang="scss">
	page {
		background-color: #eeeeee;
	}

	.fb_main {
		padding: 20rpx;
		color: #666;

		.fb_title {}

		.fb_tips {
			display: flex;
			flex-wrap: wrap;

			text {
				width: 30%;
				padding: 10rpx;
				text-align: center;
				background-color: #fff;
				margin: 20rpx 10rpx;
			}
		}

		.fb_content {
			background-color: #fff;
			margin-top: 20rpx;

			textarea {
				padding: 10rpx;
			}
		}

		.fb_tool {
			display: flex;
			flex-wrap: wrap;
			padding-bottom: 30rpx;

			button {
				margin: 0;
				width: 90rpx;
				height: 90rpx;
				font-size: 60rpx;
				padding: 0;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-left: 20rpx;
				margin-top: 20rpx;
				color: #ccc;
			}

			.up_img_item {
				margin-left: 20rpx;
				margin-top: 20rpx;
			}
		}

		.form_btn_wrap {
			margin-top: 20rpx;
			display: flex;
			justify-content: flex-end;

			button {
				margin: 0;
				width: 30%;
			}
		}
	}
</style>
